const onBox = document.querySelector('.header>.headerinner>.headerright>.on')
const offBox = document.querySelector('.header>.headerinner>.headerright>.off')
const nameBox = onBox.querySelector('.username')
const id = window.localStorage.getItem('id')
const nickname = window.localStorage.getItem('nickname')


testLogin()
async function testLogin(){
    const login = window.localStorage.getItem('login')
    if(login !== '1'){
        offBox.classList.add('ective')
        onBox.classList.remove('ective')
        return
    }
    console.log('结束');
    nameBox.innerText = nickname
    offBox.classList.remove('ective')
    onBox.classList.add('ective')
}

const exitBox = document.querySelector('.header>.headerinner>.headerright>.exit')
const listBox = document.querySelector('.header>.headerinner>.headerright>.list')
const carBox = document.querySelector('.header>.headerinner>.headerright>.car')

carBox.addEventListener('click',() =>{
    const login = window.localStorage.getItem('login')
    if(login !== '1'){
        window.alert('请先登录才可以查看购物车哦!')
        window.location.href='./login.html'
        return
    }
    window.location.href = './cart.html'
})
listBox.addEventListener('click',() =>{
    window.location.href = './list.html'
})
exitBox.addEventListener('click',() => {
    window.localStorage.removeItem('login')
    window.localStorage.removeItem('id')
    window.localStorage.removeItem('nickname')
    window.localStorage.removeItem('cart_list')
    onBox.classList.remove('ective')
    offBox.classList.add('ective')
   
})

// 搜索引擎
const inp = document.querySelector('.nav > .select > .selecttop > input')
const ul = document.querySelector('.nav > .select > .selecttop >ul')

inp.oninput =async function () {
  const text = this.value.trim()
     const res = await pAjax({
      url: '/select',
      dataType: 'json',
      data :`keyword=${text}`
    })
  console.log(res.Data);
      if (!res.Data) {
        ul.classList.remove('active')
        return
      }
      let str = ''
      res.Data.forEach(item => {
        str += `<li>${ item.name }</li>`
      })
      ul.innerHTML = str
      ul.classList.add('active')
    }

// 轮播图
// 获取元素
  
function Carousel(select){
    this.ele = document.querySelector(select)
    this.ulBox = this.ele.querySelector('ul')
    this.olBox = this.ele.querySelector('ol')
    this.banner_width = this.ele.clientWidth
    this.index = 1
    this.timer = 0
    this.flag = true
    this.init()
} 
Carousel.prototype.init = function(){
    this.elem()
    this.focus()
    this.copyEle()
    this.autoPlay()
    this.moveEnd()
    this.overOut()
    this.change()
    this.tab()
}

Carousel.prototype.elem = function() {
    const arr=[
        {name:"http://ceair.oss-cn-shanghai.aliyuncs.com/image/IntegralMall/App/EBMALL/ADVERTISE/2021/7/29/1d5f91d6673c57bc1202ba44ec3caeff.jpg"},
        {name:"http://ceair.oss-cn-shanghai.aliyuncs.com/image/IntegralMall/App/EBMALL/ADVERTISE/2021/7/29/e3ae266797cc0c76620d655651f0dece.jpg"},
        {name:"http://ceair.oss-cn-shanghai.aliyuncs.com/image/IntegralMall/App/EBMALL/ADVERTISE/2021/7/29/d483b7247f8b15acb9e04de14e032151.jpg"},
        {name:"http://ceair.oss-cn-shanghai.aliyuncs.com/image/IntegralMall/App/EBMALL/ADVERTISE/2021/7/29/77a0629da45a5ec0259dbcc07ec70743.jpg"},
        {name:"http://ceair.oss-cn-shanghai.aliyuncs.com/image/IntegralMall/App/EBMALL/ADVERTISE/2021/7/1/d532e57ccc87dfb9b5c78821ff5bd24a.jpg"}
    ]
    let a = ''
    arr.forEach(function(item){
        a+=`<li><img src="${item.name}" alt=""></li>`;
    })
    this.ulBox.innerHTML= a;
}
Carousel.prototype.focus = function() {
    const num =  this.ulBox.children.length
    for(var i = 0; i < num; i++){
        const li = document.createElement('li')
        li.classList.add('play_item')
        li.dataset.play = i
        if(i === 0 ) li.classList.add('active')
        this.olBox.appendChild(li)
    }
    this.olBox.style.width = (40 + 20) * num + 'px'
}
//复制节点
Carousel.prototype.copyEle = function (){
    const one =  this.ulBox.firstElementChild.cloneNode(true)
    const two =  this.ulBox.lastElementChild.cloneNode(true)
    this.ulBox.appendChild(one)
    this.ulBox.insertBefore(two, this.ulBox.firstElementChild)
    this.ulBox.style.width =  this.ulBox.children.length * 100 + '%'
    this.ulBox.style.left = -this.banner_width +'px'
}
// 自动轮播
Carousel.prototype.autoPlay = function(){
    this.timer = setInterval(() =>{
        this.index++
        move(this.ulBox,{left : -this.banner_width * this.index},this.moveEnd.bind(this))
    },2000)
}
// 暂停轮播
Carousel.prototype.moveEnd = function(){ 
    if(this.index === this.ulBox.children.length - 1){
        this.index = 1
        this.ulBox.style.left = - this.banner_width * this.index +'px'
    }
    if(this.index === 0){
        this.index = this.ulBox.children.length - 2
        this.ulBox.style.left = - this.banner_width * this.index +'px'
        console.log( this.ulBox.style.left);
    }
    for(let i = 0; i< this.olBox.children.length ;i++){
        this.olBox.children[i].classList.remove('active')
    }
    this.olBox.children[this.index - 1].classList.add('active')
    this.flag = true
}
//移入移出
Carousel.prototype.overOut = function (){
    this.ele.addEventListener('mouseover',() =>clearInterval(this.timer))
    this.ele.addEventListener('mouseout',() =>this.autoPlay())
}
Carousel.prototype.change = function(){
    this.ele.addEventListener('click', e =>{
        e = e || window.event
        const target = e.target || e.srcElement
        if(target.className === 'right'){
            if(this.flag === false) return 
            this.index++
            move(this.ulBox,{left : -this.banner_width * this.index},this.moveEnd.bind(this))
            this.flag = false
        }
        if(target.className === 'left'){
            if(!this.flag) return
            this.index--
            move(this.ulBox,{left : -this.banner_width * this.index},this.moveEnd.bind(this))
            this.flag = false
        }
        if(target.className === 'play_item'){
            if(!this.flag) return
            this.index = target.dataset.play - 0 + 1
            move(this.ulBox,{left : -this.banner_width * this.index},this.moveEnd.bind(this))
            this.flag = false
        }
    })
}    
Carousel.prototype.tab = function () {
    document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') {
          clearInterval(this.timer)
        } else if (document.visibilityState === 'visible') {
          this.autoPlay()
        }
      })
    }


// 二级菜单
